<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>尝试使用ajax</title>
    <script type="text/javascript">
      // ajax   /ˈeɪdʒæks/
      // XMLHttpRequest   /XML Http rɪˈkwest/
      // ActiveXObject    /æktɪv X  ˈɒbdʒɪkt;/
      // Microsoft.XMLHTTP   /ˈmaɪkrəsɔːft  XML Http/
      // open   /əʊpən/
      // send   /send/
      // onreadystatechange    /ɒn  redi  steɪt  tʃeɪndʒ/
      // readyState       /redi  steɪt/
      // responseText     /rɪˈspɒns tekst/
      // get      /ɡet/
      // post     /pəʊst/
      
    
    
      /* 
        XMLHttpRequest   IE8以下不兼容
        
        IE8以下声明ajax的方法是
            ActiveXObject("Microsoft.XMLHTTP");
      */
     
      /* 
        ajax使用步骤
          1、创建ajax对象(要考虑兼容性问题)
          2、调用open方法对ajax进行设置
          3、调用send方法运行ajax
          3、等待数据响应(有点类似单片机的串口接收中断)
      */
     
      window.onload = function(){
        var oBtn = document.getElementById("btn");
        
        oBtn.onclick = function(){
          // 1、创建ajax对象(要考虑兼容性问题)
          var xhr = null;
          if(window.XMLHttpRequest){
            xhr = new XMLHttpRequest();
          } else {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
          }
          
          // 2、调用open方法对ajax进行设置
          /* 
            第一个参数： 请求方式  get  或   post
            第二个参数： url
            第三个参数： 是否异步 
                          true   异步
                          false  同步
          */
          xhr.open("get", "./1.txt", true);
          
          // 3、调用send方法运行ajax
          xhr.send();
          
          // 3、等待数据响应(有点类似单片机的串口接收中断)
          /*
            onreadystatechange   事件类型
            xhr.readyState   发生变化的时候调用
              值为0    调用open方法之前
              值为1    调用send方法之后，发送请求
              值为2    send方法完成，已经接收到所有的响应内容
              值为3    正在解析下载到的数据
              值为4    解析已经完成
              
            xhr.status  获取当前下载的状态码   如404   下载失败     200下载成功
          */
          xhr.onreadystatechange = function(){
            //readyState为4时，表示数据接收完成并解析好了
            if(xhr.readyState == 4){
              //接收到的内容
              alert(xhr.responseText + "  " +xhr.status);
            }
          }
        }
      }
    </script>
  </head>
  <body>
    <button id="btn">获取数据</button>
  </body>
</html>
